<template>
  <el-dialog
      v-model="visible"
      title="关联的资金仓库"
      width="50%"
      append-to-body>
<!--    <div>Debug Data: {{ tableData }}</div>-->
    <Table
        :data="tableData"
        v-loading="tableLoading">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column
          prop="name"
          label="名称"
          :resizable="false" />
      <el-table-column
          prop="remark"
          label="备注"
          :resizable="false" />
      <el-table-column
          label="启用状态"
          :resizable="false">
        <template #default="scope">
          <el-tag :type="scope.row.isEnable ? 'primary' : 'danger'">
            {{ scope.row.isEnable ? config.button.text.enable
              : config.button.text.stop }}
          </el-tag>
        </template>
      </el-table-column>
    </Table>
    <Pagination
        :pageNum="pageNum"
        :pageSize="pageSize"
        :total="total"
        @handle-size-change="(val) => pageSize = val"
        @handle-current-change="(val) => pageNum = val" />
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import ApiWarnHouse from "@/api/modules/capital-ware-house.js";
import config from "@/common/element-plus/config.js";
import Pagination from "@/components/Pagination.vue";
import Table from "@/components/Table.vue";
import { useTable } from "@/hooks/useTable";
import {number} from "echarts";

const props = defineProps({
  warehouseId: {  // 接收父组件传递的仓库ID
    type: number,
    required: true
  }
});

const visible = ref(false);

const { tableMethods, tableState, pagination } = useTable({
  fetchDataApi: async () => {
    const { pageSize, pageNum } = pagination;
    if (!props.warehouseId) return { list: [], total: 0 };
    const res = await ApiWarnHouse.selectPage(
        { baseWarehouseId: props.warehouseId },
        {pageNum: pageNum.value, pageSize: pageSize.value}
    );
    return {
      list: res.data?.records || [],
      total: res.data?.total || 0
    };
  }
});

const { getList } = tableMethods;
const { pageSize, pageNum } = pagination;
const { total, tableLoading, tableData } = tableState;

defineExpose({
  visibility: visible
});

const loadData = async () => {
  if (props.warehouseId) {
    await getList();
  }
};

watch(visible, async (newVal) => {
  if (newVal && props.warehouseId) {
    await loadData();
  }
});

onMounted(async () => {
  await loadData();
});
</script>